<template>
  <div class="white-box">
    <div class="task-one">
      <div class="task-one__item">
        <span class="task-one__label">变动类型：</span>
        <el-select v-model="searchParams.type" placeholder="请选择变动类型" clearable>
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.type"
                     :key="index"/>
        </el-select>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">佣金状态：</span>
        <el-select v-model="searchParams.commissionStatus" placeholder="请选择佣金状态" clearable>
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.commissionStatus"
                     :key="index"/>
        </el-select>
      </div>
      <div class="task-one__btn">
        <el-button type="primary" :loading="searchBtnLoading" :icon="Search"
                   @click="handleSearch">搜索</el-button>
        <el-button type="success" :loading="importDataBtnLoading" @click="importData('commission/export-list-commission')"
                   :icon="Download">导出</el-button>
      </div>
    </div>
    <el-table class="table-mb" v-loading="loading" :data="list" :header-cell-style="{ background: '#F5F7FA' }" :height="userSid?420:'auto'"
              element-loading-background="rgba(255, 255, 255, 0.6)" row-key="sid" @select="handleSelected" @select-all="handleAllSelected">
<!--      <el-table-column type="selection" width="55" />-->
<!--      <el-table-column prop="avatar" label="头像"  align="center" min-width="66" max-width="66" width="66">-->
<!--        <template #default="{ row }">-->
<!--          <el-avatar :size="40" :src="row.user.avatar" style="display: block" v-if="row.user"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="nickName" label="会员" width="150">-->
<!--        <template #default="{ row }">-->
<!--          <div style="display: flex;align-items: center" v-if="row.user">-->
<!--            <span>{{row.user.nickName}}</span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="payPhone" label="佣金变动人"></el-table-column>
      <el-table-column prop="phone" label="来源"></el-table-column>

      <el-table-column prop="pointsStatus" label="佣金状态" width="120">
        <template #default="{ row }">
          <el-tag type="primary" v-if="row.commissionStatus === 4">后台变更</el-tag>
          <el-tag type="warning" v-if="row.commissionStatus === 3">佣金转积分</el-tag>
          <el-tag type="success" v-if="row.commissionStatus === 0">分享佣金</el-tag>
          <el-tag type="success" v-if="row.commissionStatus === 1">分红佣金</el-tag>
          <el-tag type="warning" v-if="row.commissionStatus === 2">佣金提现</el-tag>
          <el-tag type="success" v-if="row.commissionStatus === 5">解冻</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="total" align="center" label="此次变动">
        <template #default="{ row }">
          <el-text v-if="row.type === 0" type="success" tag="b">+ {{row.total}}</el-text>
          <el-text v-else-if="row.type === 1" type="danger" tag="b">- {{row.total}}</el-text>
          <el-text v-else type="info"></el-text>
        </template>
      </el-table-column>
      <el-table-column prop="beforeCommission" align="center" label="变动前佣金"></el-table-column>
      <el-table-column prop="afterCommission" align="center" label="变动后佣金"></el-table-column>
      <el-table-column prop="created" label="创建时间" width="160"> </el-table-column>
    </el-table>

    <el-pagination
        background
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="pageSizeNum"
        :total="totalNums"
        layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <go-back/>
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch,
  computed
} from "vue"
import listMixins from "@mixins/hook/list"
import {
  useRouter
} from "vue-router"
import {
  CirclePlus, Download, Search
} from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import * as ElementPlusIconsVue from "@element-plus/icons-vue"


const router = useRouter()
const {
  proxy
} = getCurrentInstance()

/**
 * minxin列表加载
 */
const {
  page,
  pageSizeNum,
  pageSize,
  loading,
  totalNums,
  searchParams,
  searchBtnLoading,
  apiPath,
  list,
  dialogFormRef,
  dialogShow,
  dialogForm,
  dialogParams,
  handleSearch,
  getData,
  handleAdd,
  handleEdit,
  resetDialogForm,
  handleAllSelected,
  handleSelected,
  selectedIds,
  submitDialogForm,
  closeDialog,
  handleAction,
  handleDelete,
  sortFieldName,
  importData,
  importDataBtnLoading
} = listMixins()

const props = defineProps({
  userSid: {
    type: String,
    default: '',
  },
})

apiPath.value = '/commission/all';
if(props.userSid){
  searchParams.userSid = props.userSid
}
// sortFieldName.value = 'createdMilli'
const selectOptions = reactive({
  type:[
    {label:'增加',value:0},
    {label:'减少',value:1},
  ],
  commissionStatus:[
    {label:'全部',value:2},
    {label:'分享佣金',value:0},
    {label:'分红佣金',value:1},
  ]
})

onMounted(() => {
  getData()
})
const fleshData = () =>{
  getData()
}
defineExpose({
  fleshData
})
</script>

<style lang="less">

</style>